<template>
    <section>
    <el-card shadow="never">
      <div slot="header">
        后台管理
      </div>
      <div class="columns">
        <div class="column is-full">
          <el-tabs>
            <!-- 名言管理 -->
            <el-tab-pane label="每日一句" name="first">
              <el-tabs>
                <el-tab-pane label="列表">
                  <article v-for="(tip, index) in tipList" :key="index" class="media">
                    <p>{{ tip.content }}</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <p>作者：{{ tip.author }}</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <div>
                      <a>
                        <samp @click="handleTipDelete(tip.id)">删除</samp>
                      </a>
                    </div>
                  </article>
                </el-tab-pane>
                <el-tab-pane label="添加">
                    <el-form>
                    <el-form-item label="名言警句">
                        <el-input v-model="content"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="author"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button>提交</el-button>
                    </el-form-item>
                </el-form>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <!-- 推广管理 -->
            <el-tab-pane label="推广" name="second">
              <el-tabs>
                <el-tab-pane label="推广列表">
                  <article v-for="(promote, index) in promoteList" :key="index" class="media">
                    <p>{{ promote.title }}</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <p>链接：{{ promote.link }}</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <div>
                      <a>
                        <samp @click="handlePromoteDelete(promote.id)">删除</samp>
                      </a>
                    </div>
              </article>
                </el-tab-pane>
                <el-tab-pane label="添加推广">
                    <el-form>
                    <el-form-item label="网站名称">
                        <el-input v-model="webname"></el-input>
                    </el-form-item>
                    <el-form-item label="网站链接">
                        <el-input v-model="link"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button>提交</el-button>
                    </el-form-item>
                </el-form>
                </el-tab-pane>
              </el-tabs>
              
            </el-tab-pane>
            <!-- 帖子管理 -->
            <el-tab-pane label="帖子" name="third">
              <div>
                <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="帖子列表" name="latest">
                      <article v-for="(item, index) in articleList" :key="index" class="media">
                        <div class="media-left">
                          <figure class="image is-48x48">
                            <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px;">
                          </figure>
                        </div>
                      <div class="media-content">
                      <div class="">
                        <p class="ellipsis is-ellipsis-1">
                        <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                        <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span>
                        </router-link>
                      </el-tooltip>
                      </p>
                      </div>
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>

                      &nbsp;&nbsp;&nbsp;&nbsp;

                      <div>
                        <a>
                          <samp @click="handleDelete(item.id)">删除</samp>
                        </a>
                      </div>

                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
                      </article>
          </el-tab-pane>
                  </el-tabs>
                </div>

                <!--分页-->
                <pagination
                  v-show="page.total > 0"
                  :total="page.total"
                  :page.sync="page.current"
                  :limit.sync="page.size"
                  @pagination="init"
                      />
                </el-card>
              </div>
            </el-tab-pane>
            <!-- 评论管理 -->
            <el-tab-pane label="评论" name="fourth">
              <el-tabs>
                <el-tab-pane  label="全部评论">
                  <article v-for="(comment, index) in commentsList" :key="index" class="media">
                      <p>{{ comment.content }}</p>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <div>
                        <a>
                          <samp @click="handleCommentDelete(comment.id)">删除</samp>
                        </a>
                      </div>
                  </article>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </section>
</template>

<script>
import pagination from '@/components/Pagination/index'
import { getList } from '@/api/post'
import { deleteTopic } from '@/api/post'
import { get_allcomments , deleteComment } from '@/api/comment'
import { get_allTip , deleteTip } from '@/api/tip'
import { getPromoteList , deletePromote } from '@/api/promote'
import Pagination from '@/components/Pagination'

export default {
  name: 'admin',
  components: { pagination },
  data() {
    return {
      tipFrom: {
        content: "",
        author: "",
      },
      promoteFrom: {
        webname: "",
        link: "",
      },
      content: "",
      author: "",
      webname: "",
      link: "",
      activeName: 'first',
      activeName: 'latest',
      articleList: [],
      commentsList: [],
      tipList: [],
      promoteList: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
        tab: 'latest'
      }
    }
  },
  created() {
    this.init(this.tab)
    this.getallcomments()
    this.getalltip()
    this.getPromote()
  },
  methods: {
    init(tab) {
      getList(this.page.current, this.page.size, tab).then((response) => {
        const { data } = response
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
        this.articleList = data.records
      })
    },
    //添加名言
    //名言列表
    getalltip() {
        get_allTip().then((response) => {
        const { data } = response
        this.tipList = data
      })
    },
    //评论列表
    getallcomments() {
        get_allcomments().then((response) => {
        const { data } = response
        this.commentsList = data
      })
    },
    //推广列表
    getPromote() {
        getPromoteList().then((response) => {
        const { data } = response
        this.promoteList = data
      })
    },
    //
    handleClick(tab) {
      this.page.current = 1
      this.init(tab.name)
    },
    //名言删除
    handleTipDelete(tip_id) {
      deleteTip(tip_id)
      this.$message.success('名言删除成功')
      this.$router.go(0)
    },
    //评论删除
    handleCommentDelete(coment_id) {
      deleteComment(coment_id)
      this.$message.success('评论删除成功')
      this.$router.go(0)
    },
    //推广删除
    handlePromoteDelete(promote_id) {
      deletePromote(promote_id)
      this.$message.success('推广删除成功')
      this.$router.go(0)
    },
    //文章删除
    handleDelete(id) {
      deleteTopic(id).then(value => {
        const { code, message } = value
        alert(message)
        this.$message.success('文章删除成功')
        if (code === 200) {
          setTimeout(() => {
            this.$router.go(0)
          }, 500)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
